<template>
  <div>
    <!-- 页面标题 -->
    <van-nav-bar fixed left-arrow title="小智同学" @click-left="$router.back()" />
    <!-- 聊天区域 -->
    <div class="chatbox" ref="chatbox">
      <div
        class="chat"
        :class="{roboto: item.isRoboto === true, user: item.isRoboto === false}"
        v-for="(item, index) in chatArr"
        :key="index"
      >
        <img
          class="img"
          src="http://img2.imgtn.bdimg.com/it/u=1507983802,1675640584&fm=26&gp=0.jpg"
          alt
        />
        <div class="msg">{{ item.content }}</div>
      </div>
      <!-- 机器人 -->
      <!-- <div class="chat roboto">
          <img class="img" src="http://img2.imgtn.bdimg.com/it/u=1507983802,1675640584&fm=26&gp=0.jpg" alt="">
          <div class="msg">你好啊</div>
      </div>-->
      <!-- 用户 -->
      <!-- <div class="chat user">
          <img class="img" src="http://img2.imgtn.bdimg.com/it/u=1507983802,1675640584&fm=26&gp=0.jpg" alt="">
          <div class="msg">你好啊</div>
      </div>-->
    </div>
    <!-- 信息发送 -->
    <van-search
      class="message"
      left-icon
      background="#4fc08d"
      v-model="value"
      show-action
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch" style="color: #fff;">发送</div>
      </template>
    </van-search>
  </div>
</template>

<script>
// 导入 socket.io-client
import io from 'socket.io-client'

export default {
  data () {
    return {
      value: '',
      // 聊天的数组
      chatArr: [
        { content: '你好啊，我是小智', isRoboto: true },
        { content: '你好啊', isRoboto: false },
        { content: '你也好', isRoboto: true },
      ],
      // socket 对象
      socket: null
    }
  },
  methods: {
    onSearch () {
      // 将输入框中的内容添加到 chatArr 中
      this.chatArr.push({
        content: this.value,
        isRoboto: false
      })
      this.$nextTick(() => {
        // 应该让内容自动滚动到底部
        var chatbox = this.$refs.chatbox
        chatbox.scrollTop = chatbox.scrollHeight
      })
      // 将内容提交到服务器
      this.socket.emit('message', {
        msg: this.value,
        timestamp: Date.now()
      })
      // 将输入框中的内容清空
      this.value = ''
    }
  },
  mounted () {
    // 得到 token
    var token = this.$store.state.userInfo.token
    // 连接服务器
    this.socket = io(`http://ttapi.research.itcast.cn?token=${token}`);
    // 接收服务器响应的数据
    this.socket.on('message', data => {
      this.chatArr.push({
        content: data.msg,
        isRoboto: true
      })
      this.$nextTick(() => {
        // 应该让容易自动滚动到底部
        var chatbox = this.$refs.chatbox
        chatbox.scrollTop = chatbox.scrollHeight
      })
    })
  }
}
</script>

<style lang="less">
.message {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  .van-search__action:active {
    background-color: #ccc;
  }
}

.chatbox {
  position: fixed;
  left: 0px;
  top: 46px;
  bottom: 54px;
  width: 100%;
  background-color: #ccc;
  overflow: auto;
  .chat {
    margin: 20px 10px;
    overflow: hidden;
    .img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .msg {
      background-color: #e0effb;
      border: 1px solid #cee1f0;
      padding: 10px;
      border-radius: 5px;
      max-width: 70%;
    }
  }
  .roboto {
    .img,
    .msg {
      float: left;
    }
  }
  .user {
    .img,
    .msg {
      float: right;
    }
    .img {
      margin-right: 0px;
      margin-left: 10px;
    }
  }
}
</style>
